二、BOM核心---window对象
2.1 window对象
BOM 的核心对象是 window ，它表示浏览器的一个实例。在浏览器中， window 对象有双重角色，它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。
通过window可以操作整个浏览器。
BOM图谱：
window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。
2.1.1 全局作用域
由于 window 对象同时扮演着 ECMAScript中 Global 对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window 对象的属性和方法。
注意：有三种获取全局变量的方式。
<script type="text/javascript">
var age = 29; //声明一个全局变量
function sayAge() { //声明一个全局函数
alert(this.age);//this表示，调用这个函数时使用的对象。将来是通过window调用的，所以this指代的window
}
// 全局变量成为了window对象的属性。 所以可以通过window.age访问
alert(window.age); //29
sayAge(); //29
// 全局函数成为了window对象的方法。 所以可以通过window.sagAge() 来访问。
window.sayAge(); //29
</script>
//提示：虽然可以通过window对象来调用，但是实际开发的时，一般都省略window。
2.1.2 window窗口大小
A. 有三种方式获取浏览器的窗口大小：(浏览器的视口，不包括工具栏和滚动条)
在Internet Explorer(9+)、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
var msg = "窗口宽度：" + window.innerHeight + "\n窗口高度：" + window.innerWidth;
alert(msg );
对于 Internet Explorer 8、7、6、5：(Chrome和Firefox也支持)
document.documentElement.clientHeight
document.documentElement.clientWidth
var msg = "窗口宽度：" + document.documentElement.clientWidth + "\n窗口高度：" + document.documentElement.clientHeight;
alert(msg);
为了兼容浏览器的版本可以使用下面的代码(可以涵盖所有的浏览器)
var w = window.innerWidth || document.documentElement.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight;
alert("窗口宽度：" + w + "\n窗口高度：" + h);
B. 调整窗口大小：
window.resizeTo(w, h) ：调整到指定的大小
resizeBy(deltW, deltH) ：增加指定值的窗口的宽和高
一些浏览器已经禁用了这个方法(Chrome和Firfox均禁用了这两个方法, ie可用)
<body>
<button onclick="to();">调整到指定大小</button>
<br/>
<button onclick="by();">宽高增加10个像素</button>
<script type="text/javascript">
function to () {
alert("我要变小了");
window.resizeTo(200, 300);
}
function by () {
alert("靠，变大了");
window.resizeBy(10, 10);
}
</script>
</body>
2.1.3 打开窗口
open(URL,name,features) 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
参数 描述 URL 一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。 name 一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记<a>和<form>的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。 features 一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在""窗口特征""这个表格中，我们对该字符串的格式进行了详细的说明。 备注：如果不用到frame框架，则只需要传入第1个参数和第3个参数即可
窗口特征(常用)：
属性名称 说 明 height、width 窗口文档显示区的高度、宽度。以像素计。 left、top 窗口的x坐标、y坐标。以像素计 toolbar=yes\ no\ 1\ 0 是否显示浏览器的工具栏。黙认是yes。 scrollbars=yes\ no\ 1\ 0 是否显示滚动条。黙认是yes。 location=yes\ no\ 1\ 0 是否显示地址地段。黙认是yes。 status=yes\ no\ 1\ 0 是否添加状态栏。黙认是yes。 menubar=yes\ no\ 1\ 0 是否显示菜单栏。黙认是yes。 resizable=yes\ no\ 1\ 0 窗口是否可调节尺寸。黙认是yes。 titlebar=yes\ no\ 1\ 0 是否显示标题栏。黙认是yes。 fullscreen=yes\ no\ 1\ 0 是否使用全屏模式显示浏览器。黙认是no。
- 打开新的窗口，窗口特性全部使用默认值
<body>
<button onclick="openAnother();">打开新窗口</button>
<script type="text/javascript">
function openAnother () {
window.open("http://www.yztcedu.com"); //打开新窗口，窗口特性全部使用默认值。
}
</script>
</body>
- 打开新的窗口，设置窗口特性
<body>
<button onclick="openAnother();">打开新窗口</button>
<script type="text/javascript">
var win;
function openAnother () {
win = window.open("http://www.yztcedu.com", "", "width=400, height=400, toolbar = no, menubar = no,left = 200, right = 200");
}
</script>
</body>
- open方法返回打开的那个窗口的window对象，可以调用close方法关闭新打开的窗口。
win.close();
//也可以调整新开窗口的大小位置等，但是大部分浏览器禁用了这个功能。
2.1.4 window中的定时器(超时调用和周期调用)(重点)
window对象提供了两个类似定时器功能的方法：超时调用和周期调用(间隙调用)
JavaScript 是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。前者是在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。
window.setTimeout()--超时调用
/*
setTimeout(code,millisec)
参数1：要执行代码。一般传入一个函数。(当然也可是字符串形式的代码，但是不建议使用)
参数2：多长时间后执行参数1中的代码。 单位毫秒
*/
<script type="text/javascript">
//传入函数的时，函数名不要加括号。(因为方法不是我们调用，是引擎帮助我们调用)
// setTimeout方法会返回一个值，表示超时调用的id，可以在任务执行前取消任务。
var timeOutId = window.setTimeout(go, 3000); // 3秒中之后执行函数go中的代码
function go () {
window.open("http://www.yztcedu.com")
}
window.clearTimeout(this.timerId); //取消这个超时调用，如果超时调用已经执行完毕，就什么也不会发生。
</script>
setInterval--周期调用(间隙调用)
/*
setInterval(code,millisec)
参数1：每隔一段时间执行一次的代码。 一般是一个函数
参数2：周期性执行的时间间隔。 单位毫秒
*/
<body>
<h1 id="time"></h1>
<script type="text/javascript">
//显示时间，每秒钟变化一次。
window.setInterval(function() {
var timeElement = document.getElementById("time"); //找到h1标签
var msg = new Date().toLocaleString();
timeElement.innerHTML = msg; //设置h1标签中的值
}, 1000);
</script>
</body>
//清除间隔定时器
window.clearInterval(id);
2.1.5 系统对话框
alert()对话框
confirm()对话框.
方法用于显示一个带有指定消息和确定及取消按钮的对话框。
说明：如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。
<script type="text/javascript">
var isOk = window.confirm("你确定要抛弃我吗？");
//根据用户的不同相动作做出不同响应
if(isOk){ //用户按下 确定
window.alert("祝你好运");
}else { //用户按下 取消
window.alert("我们就再玩会吧");
}
</script>
prompt(text, default) 这是一个提示框，用于提示用户输入一些文本。提示框中除了会有 确定和取消，还有一个可以让用户输入文本的文本框。方法的返回值是用户输入的具体的文本。
参数1：提示语句
参数2：输入文本框默认已经输入的字符，如果没有默认输入，不用传递
返回值：如果用户按下确定，则返回具体的文本内容，如果按下取消 返回 null
<script type="text/javascript">
var msg = prompt("请输入你的姓名：");
if(msg != null && msg.length > 0){
alert("欢迎：" + msg);
}
</script>